<template>
  <div class="search-container">
    <!-- 搜索栏 -->
    <!-- form表单：手机端点击输入框时下方弹出键盘，自带搜索
         @cancel="onCancel" 点击取消触发此事件
         @focus="isResoultsShow = false" 输入框获取焦点，不展示搜索结果
    -->
    <form class="search-form" action="/">
      <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        background="#3296fa"
        @focus="isResoultsShow = false"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <!-- 结果列表入口
         如果isResoultsShow为true，展示此项
     -->
    <search-resoults v-if="isResoultsShow" :searchText="searchText" ref="" />
    <!-- 联想建议入口
         如果isResoultsShow为false，输入框有文本，展示此项
     -->
    <search-suggest
      v-else-if="searchText"
      :searchText="searchText"
      @on-search="onSearch"
    />
    <!-- 搜索历史入口
         如果isResoultsShow为false,输入框没有文本，展示此项
    -->
    <search-history v-else />
  </div>
</template>

<script>
import SearchHistory from './comment/SearchHistory.vue'
import SearchResoults from './comment/SearchResoults.vue'
import SearchSuggest from './comment/SearchSuggest.vue'
import { mapState } from 'vuex'

export default {
  components: { SearchHistory, SearchSuggest, SearchResoults },
  name: 'SearchIndex',
  data () {
    return {
      searchText: '', // 输入框文本
      isResoultsShow: false // 搜索结果展示
    }
  },

  computed: {
    ...mapState(['user'])
  },

  methods: {
    // 搜索事件
    onSearch (val) {
      console.log(val)
      // 点击
      this.searchText = val
      // 搜索事件触发，展示搜索结果结果
      this.isResoultsShow = true

      // 搜索后将关键字保存（未登录：本地   登陆：vuex + 本地）
      if (this.user) {
        this.$store.commit('setSearchText', this.searchText)
      } else {
        localStorage.setItem('TOKEN_KEY_SEARCHTEXT', this.searchText)
      }
    },
    // 取消事件
    onCancel () {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
.search-container {
  padding-top: 108px;
  .van-search__action {
    color: #fff;
  }
  .search-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
</style>
